<template>
    <div class="login_container">
        <!-- 登录块 -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="@/assets/logo.png" alt="">
            </div>
            <!-- 表单区域 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login_form" label-width="0px">

                <el-form-item class="login_input" prop="username">
                    <el-input v-model="loginForm.username" style="height: 37px;" placeholder="请输入用户名">
                        <template #prefix>
                            <i class="iconfont icon-denglu-copy"></i>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item class="login_input" prop="password">
                    <el-input v-model="loginForm.password" style="height: 37px;" placeholder="请输入密码" type="password" show-password="true">
                        <template #prefix>
                            <i class="iconfont icon-denglu-mima"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item class="login_btn">
                    <el-button type="primary" @click="submitForm">登录</el-button>
                    <el-button type="info" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { loginApi } from '@/api/login'
import router from '@/router'



// 表单数据
const loginForm = ref({
    username: '',
    password: ''
})

// 表单验证规则
const rules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
})

// 表单引用
const loginFormRef = ref()

/**
 * 提交表单
 */
const submitForm = async () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
        const result= await loginApi(loginForm.value)
        if(result.code!==200){
            ElMessage.error(result.msg)
            return false
        }else{
            ElMessage.success("登录成功!")
            console.log(result)
            // 将token存储到本地存储中
            if(result.data.token){
            localStorage.setItem('userToken', JSON.stringify(result.data.token))
            }
            // 登录成功后可以进行页面
            router.push('/home')
        }
    } else {
        ElMessage.error('请填写完整信息!')
        return false
    }
  })

}
/**
 * 重置表单
 */
const resetForm = () => {
    loginFormRef.value.resetFields()
    loginForm.value= {
        username: '',
        password: ''
    }
}

</script>

<style lang="less" scoped>
//根样式节点
.login_container {
    background-color: #2b4b6b;
    height: 100%;
}
// 登录块样式
.login_box{
    width: 450px;
    height: 300px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // 头像样式
    .avatar_box {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 5px #ddd;
        position: absolute;
        left:50%;
        transform: translate(-50%, -50%);
        background-color: #0ee;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}
//按钮样式
.login_btn{
    display: flex;
    padding-left: 290px;
 }
 // 表单样式
 .login_form{
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding:10px 10px;
    box-sizing: border-box;
 }
 // 输入框样式
 .login_input{
    padding-bottom: 5px;
 }
</style>